<template>
	<view>
		<cu-custom style="height: 0px;" class="navBox" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{MouldName}}</block>
		</cu-custom>
		
		<view class="contentBox">
			<view class="contentHeader">
				<view class="headerLogo">
					<image :src="src" mode=""></image>
				</view>
				
				<view class="contentTitle">
					<view>{{MouldName}}</view>
					<view>备注：{{Remarks}}</view>
					<view>流程数：{{IsWorkCount}}</view>
				</view>
			</view>
			
			<view class="flowInfo">
				<view class="flowInfoTop">
					<h4 class="bodyTitle">流程信息</h4>
					<view class="allChecked" @click="flagChecked">
						{{checkedList.length == 0 ? '全选' : '取消'}}
					</view>
				</view>
				<!-- 新-修改 -->
				<view style="margin-top: 20rpx;margin-bottom: 30rpx;">
					<checkbox-group @change="checkChange" v-model="checkedList">
						<view v-for="(item, index) in list" :key="index" class="eachBox">
							<!-- 一级标题 -->
							<view class="oneTitleBox">
								<view class="newdotting"></view>
								<text class="oneTitle">{{item.WorkFlowName}}</text>
								<text v-if="isChoose == 1" @click="goEditUser(item.Id,item.users)" class="secondTitle">编辑</text>
								<view class="checkbox">
									<checkbox :value="item.Id" :checked="allChecked"></checkbox>
								</view>
							</view>
							<!-- 二级标题 -->
							<view class="twoTitleBox">
								{{item.Remarks}}
							</view>
							<!-- 人员 -->
							<view class="personBox">
								<view v-for="(item1, index1) in item.users" :key="index1" class="eachPerson">
									<u-avatar size="mini" :src="headimage"></u-avatar>
									<view class="eachPersonName">{{item1.importUnitName}}</view>
								</view>
								
							</view>
						</view>
					</checkbox-group>
					<!-- <view v-for="(item, index) in list" :key="index" class="eachBox">
						<view class="oneTitleBox">
							<view class="newdotting"></view>
							<text class="oneTitle">{{item.WorkFlowName}}</text>
							<text v-if="isChoose == 1" @click="goEditUser(item.Id,item.users)" class="secondTitle">编辑</text>
						</view>
						<view class="twoTitleBox">
							{{item.Remarks}}
						</view>
						<view class="personBox">
							<view v-for="(item1, index1) in item.users" :key="index1" class="eachPerson">
								<u-avatar size="mini" :src="headimage"></u-avatar>
								<view class="eachPersonName">{{item1.importUnitName}}</view>
							</view>
							
						</view>
					</view> -->
				</view>
				<!-- 新-修改结束 -->
			</view>
		</view>
		<!-- 加入按钮 -->
		<view class="padding-lr flex margin-top-sm" style="justify-content: space-between;height: 200rpx;">
		</view>
		<view v-if="isChoose" class="publish-goods-wrap">
			<view @click="chooseSave"  class="publish-goods-btn" >选择且保存 </view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js'
	export default {
		data() {
			return {
				id: '',
				isChoose:false,
				headimage:this.$request22.baseUrl1+'/Resource/sg/avatar/commonAvatar.png',
				src:this.$request22.baseUrl1+"/Resource/sg/flow/flowdetail2.png",
				list:[],
				MouldName:'',
				IsWorkCount:'',
				Remarks:'',
				checkedList: [], // 已选项数组
				uploadList: []
			}
		},
		onShow() {
			let that=this
			uni.$on('returnData',function(data){
				let choosedPersonList=data.data
				let flowId=data.flowId
				console.log(flowId)
				console.log(choosedPersonList)
				if(flowId!=null&&choosedPersonList!=null&&choosedPersonList.length>0){
					let chooseListEntity=that.list.find(i => i.Id === flowId)
					if(chooseListEntity!=null){
						let newChooseUser=[]
						for(let i=0;i<choosedPersonList.length;i++){
							let choosedPersonListEntity=choosedPersonList[i]
							let newUser={}
							newUser.DH=''
							newUser.Name=choosedPersonListEntity.RealName
							newUser.UserId=choosedPersonListEntity.Id
							newChooseUser.push(newUser)
						}
						chooseListEntity.users=newChooseUser
						
						for(let i=0;i<that.list.length;i++){
							if(that.list[i].Id===flowId){
								that.list[i].users=newChooseUser
							}
						}
					}
				}
			})
		},
		onLoad(option) {
			let that=this
			that.getDetail(option.tempId)
			that.id = option.tempId
			that.isChoose=option.isChoose==1?true:false
			that.MouldName = option.title
			that.IsWorkCount = option.count
			that.Remarks = option.Remarks
		},
		computed: {
			allChecked() {
				// 当已选项数组长度与列表长度相等时，表示全选
				return this.checkedList.length == this.list.length
			}
		},
		methods: {
			chooseSave(){
				//先去保存接口，再跳转页面
				let that=this
				
				let finalList = []
				
				if (that.uploadList.length <= 0) {
					uni.showToast({ title: '请勾选流程信息', icon: 'none' });
				} else {
					
					for(let i = 0; i < that.uploadList.length; i++) {
						let newObj = {}
						newObj.Sort = i + 1
						newObj.WorkFlowName = that.uploadList[i].WorkFlowName
						newObj.NextStepId = '0'
						newObj.IsEnd = that.uploadList[i].IsEnd
						newObj.logID = that.uploadList[i].Id
						
						newObj.users = that.uploadList[i].users
						
						finalList.push(newObj)
					}
					finalList[finalList.length - 1].IsEnd = 1
					let opts = {
						url: 'WorkflowApi/SaveWorkList',
						method: 'POST'
					};
					let data = {
						list: finalList,
						ProcessID:that.id
					}
					uni.showLoading({
						title:'保存中...'
					})
					request.httpTokenRequest(opts,data).then(res=>{
						uni.hideLoading();
						if (res.data.code == 1) {
							let id = res.data.data
							uni.navigateTo({
								url: '/pages-workflow/addMission?tempId='+id+'&tempTitle='+that.MouldName
							})
						} else {
							uni.showToast({ title: res.data.msg, icon: 'none' });
						}
						
						
					})
				}
				
			},
			goEditUser(id,users){
				let that=this
				let qrcodeUserIds=[]
				if(users!=null&&users.length>0){
					for(let i=0;i<users.length;i++){
						qrcodeUserIds.push(users[i].importUnitId)
					}
				}
				uni.navigateTo({
					url: '/pages-device/workflow/searchUser?qrcodeUserIds='+qrcodeUserIds+'&flowId='+id+'&MouldName='+that.MouldName+'&IsWorkCount='+that.IsWorkCount+'&Remarks='+that.Remarks,
					events: {
						acceptDataFromOpenedPage: data => {
							let choosedPersonList=data.data.newChooseUsersList
							let flowId=data.data.flowId
							console.log(flowId)
							console.log(choosedPersonList)
							if(flowId!=null&&choosedPersonList!=null&&choosedPersonList.length>0){
								let chooseListEntity=that.list.find(i => i.Id === flowId)
								if(chooseListEntity!=null){
									let newChooseUser=[]
									for(let i=0;i<choosedPersonList.length;i++){
										let choosedPersonListEntity=choosedPersonList[i]
										let newUser={}
										newUser.DH=''
										newUser.importUnitName=choosedPersonListEntity.importUnitName
										newUser.importUnitId=choosedPersonListEntity.importUnitId
										newUser.flag=choosedPersonListEntity.flag
										newChooseUser.push(newUser)
									}
									chooseListEntity.users=newChooseUser
									
									for(let i=0;i<that.list.length;i++){
										if(that.list[i].Id===flowId){
											that.list[i].users=newChooseUser
										}
									}
								}
							}
						}
					}
				})
			},
			getDetail(id){
				let that=this
				let opts = {
					url: 'WorkflowApi/GetWorkFlowConfigListByProcessID',
					method: 'get'
				};
				let data = {
					// id:id
					ProcessID: id,
				}
				uni.showLoading({
					title:'加载中...'
				})
				request.httpTokenRequest(opts,data).then(res=>{
					uni.hideLoading();
					if (res.data.code === 1) {
						that.list=res.data.data.Data
					}else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				})
			},
			checkChange(e){
				let that = this
				let valArr = e.detail.value
				console.log('valArr', valArr)
				let checkFlowList = []
				for(let i = 0; i < valArr.length; i++) {
					checkFlowList = checkFlowList.concat(that.list.filter(item => item.Id == valArr[i]))
				}
				checkFlowList.sort((item1,item2) => item1.Sort - item2.Sort)
				console.log('checkFlowList', checkFlowList)
				that.uploadList = checkFlowList
				
			},
			flagChecked(){
				let that = this
				if (that.allChecked) {
				     // 如果当前是全选状态，则取消选择
					that.checkedList = [];
					that.uploadList = [];
				} else {
					// 如果当前非全选状态，则选择所有
					that.checkedList = that.list.slice();
					that.uploadList = that.list;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 新--修改
	.eachBox{
		width: 100%;
		margin-left: 30rpx;
		border-left: 1px solid #999;
	}
	// 一级标题
	.oneTitleBox{
		display: flex;
		align-items: center;
		position: relative;
		width: 95%;
	}
	.newdotting{
		width: 40rpx;
		height: 40rpx;
		border: 9rpx solid #409eff;
		border-radius: 50%;
		// margin-right: 20rpx;
		background-color: #fff;
		position: absolute;
		transform: translateX(-50%);
	}
	.oneTitle{
		font-weight: 700;
		font-size: 30rpx;
		margin-left: 25rpx;
	}
	.secondTitle{
		margin-left: 14rpx;
		font-weight: 400;
		font-size: 28rpx;
		color:#409eff;
	}
	.checkbox{
		position: absolute;
		right: 20rpx;
	}
	// 二级标题
	.twoTitleBox{
		font-weight: 400;
		font-size: 24rpx;
		margin:20rpx 0 20rpx 40rpx;
	}
	// 人员
	.personBox{
		// border:1px solid yellow;
		display: flex;
		flex-wrap: wrap;
		margin-left: 50rpx;
		.eachPerson{
			// border:1px solid blue;
			display: flex;
			align-items: center;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			.eachPersonName{
				margin-left: 20rpx;
			}
		}
	}
	// 新--修改结束
	
	
	
	.contentBox {
		background-color: rgba(249,249,249,1);
		
		.contentHeader {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 40rpx;
			padding-bottom: 20rpx;
			background-color: #fff;
			
			.headerLogo {
				width: 180rpx;
				height: 180rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
				
			}
			.contentTitle {
				flex-grow: 1;
				align-self: stretch;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
				>view {
					> text {
						margin-right: 10rpx;
					}
				}
			}
		}
		.contentBody {
			margin: 20rpx 0;
			padding-bottom: 10rpx;
			background-color: #fff;
			.bodyTitle {
				padding: 25rpx 40rpx;
				font-weight: 700;
				border-bottom: 1rpx solid rgba(242, 242, 242, 1);
			}
			.bodyLine {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 30rpx 40rpx;
				.infoKey {
					color: #999999;
				}
			}
		}
		.flowInfo {
			margin-bottom: 20rpx;
			background-color: #fff;
			
			.flowInfoTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25rpx 40rpx;
				border-bottom: 1rpx solid rgba(242, 242, 242, 1);
				.bodyTitle {
					
				}
				.allChecked {
					padding: 0rpx 30rpx;
					background: #0079FE;
					color: #FFFFFF;
					border-radius: 50rpx;
					line-height: 60rpx;
					text-align: center;
				}
			}
			.flowCon {
				padding: 40rpx 40rpx 0;
				.flowBox {
					border-left: 1rpx solid #999;
					height: auto;
					min-height: 240rpx;
					padding-bottom: 40rpx;
					box-sizing: content-box;
					position: relative;
					&:last-child {
						border-left: none
					}
				
					.dot {
						position: absolute;
						top: 0;
						transform: translateX(-50%);
						width: 20rpx;
						height: 20rpx;
						border: 1rpx solid #000;
						border-radius: 50%;
						background-color: #fff;
					}
					
					.hasDot{
						position: absolute;
						top: -3rpx;
						transform: translateX(-50%);
						width: 20rpx;
						height: 20rpx;
						border: 9rpx solid #0a9b24;
						border-radius: 50%;
						background-color: #fff;
						box-sizing: content-box;
					}
					.dotting{
						position: absolute;
						top: -3rpx;
						transform: translateX(-50%);
						width: 20rpx;
						height: 20rpx;
						border: 9rpx solid #409eff;
						border-radius: 50%;
						background-color: #fff;
						box-sizing: content-box;
					}
					
					.flowStatus {
						padding-bottom: 20rpx;
						text-indent: 35rpx;
						.status {
							position: relative;
							top: -9rpx;
							font-weight: 700;
							font-size: 30rpx;
						}
					}
					.flowTime {
						padding-bottom: 20rpx;
						text-indent: 35rpx;
						.time {
							color: #565656;
							font-size: 24rpx;
							font-weight: 700;
						}
					}
					
					.flowUser {
						padding-bottom: 20rpx;
						text-indent: 35rpx;
						height: auto;
						min-height: 50px;
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						align-content: flex-start;
						.time {
							color: #3b3b3b;
							font-size: 24rpx;
							line-height: 50px;
							font-weight: 700;
							text-align: left;
						}
					}
					.lookOver {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-70%);
						.lookBtn {
							width: 150rpx;
							border-radius: 100rpx;
							border: 1rpx solid #84dcb0;
							background-color: #e7f4ee;
							text-align: center;
							height: 50rpx;
							line-height: 50rpx;
							color: #19be6b;

						}
					}
					.toSign {
						position: absolute;
						right: 0;
						top: 0;
						.signBtn {
							width: 150rpx;
							border-radius: 100rpx;
							border: 1rpx solid #7bbcff;
							background-color: #f0f7ff;
							text-align: center;
							height: 50rpx;
							line-height: 50rpx;
							color: #409eff;
						}
						.signBtn_noAuth {
							width: 150rpx;
							border-radius: 100rpx;
							border: 1rpx solid #dcdfe6;
							background-color: #dcdfe6;
							text-align: center;
							height: 50rpx;
							line-height: 50rpx;
							color: #5e5e5e;
						}
					}
				}
			}
		}
	}
	
	
	.publish-goods-wrap {
			background: rgba(255, 255, 255, .5);
			padding: 24rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}

	.publish-goods-btn {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}
	
		.publish-goods-btn-left {
			width: 44%;
			margin: 12rpx;
			background: #0079FE;
			color: #FFFFFF;
			height: 82rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 82rpx;
			float: left;
		}
		.publish-goods-btn-right {
			width: 44%;
			margin: 12rpx;
			background: #e54d42;
			color: #FFFFFF;
			height: 82rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 82rpx;
			float: right;
		}
	
		.goods-empty-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40%;
		}
</style>